<template>
    <header id='head_top'>
        <section class="head_goback" v-if="goBack" @click="gohome">
            <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/>
            </svg>
        </section>
        <section class="title_head ellipsis" v-if="headTitle">
            <span class="title_text">{{headTitle}}</span>
        </section>
    </header>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    export default {
    	data(){
            return{

            }
        },
         mounted(){
            //获取用户信息
            //  this.getUserInfo();

        },
				methods:{
					gohome(){
						this.$router.push({path:'/home'});
					}
				},
        props: ['signinUp', 'headTitle', 'goBack'],

    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';

    #head_top{
        background-color: #5082d8;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        @include wh(100%, 44px);
        padding-top: 20px;
    }
    .head_goback{
        left: 1rem;
        @include wh(0.6rem, 1rem);
        line-height: 2.2rem;
     /*   margin-top: 0.4rem;*/
        padding: 0 3rem;
        height: 1rem;
        margin-left: -2rem;
    }
    .head_login{
        right: 0.55rem;
        @include sc(0.65rem, #fff);
        @include ct;
        .login_span{
            color: #fff;
        }
        .user_avatar{
            fill: #fff;
            @include wh(.8rem, .8rem);
        }
    }
    .title_head{
        @include center;
        width: 50%;
        color: #fff;
        text-align: center;
        margin-top:.18rem;
        .title_text{
            @include sc(0.72rem, #fff);
            text-align: center;
            font-weight: 500;
        }
    }
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
      #head_top{
        padding-top: 44px;
      }
      .title_head{
        margin-top: .48rem;
      }
      .head_goback{
        height: 1.2rem;
      }
    }
    @media only screen and (device-width: 414px) and (device-height: 896px){
      #head_top{
        padding-top: 44px;
      }
      .title_head{
        margin-top: .48rem;
      }
      .head_goback{
        height: 1.2rem;
      }
    }
</style>
